<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Vue Stick demo</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			background: #333;
		}

		.container {
			position: relative;
			min-height: 1000px;
			margin: 40px 40px;
		}
		.tools {
			padding: 20px;
			text-align: center;
			background: #555
		}
		.footer {
			height: 400px;
			background: #555;
		}

		.card {
			background: #fff;
		}

		.card img {
			display: block;
			width: 100%;
			background: #aaa;
		}

		.card h2 {
			margin: 0;
			padding: 10px 15px;
			font-size: 18px;
		}

		.card p {
			margin: 0;
			padding: 10px 15px;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<div id="app"></div>
	<div class="footer"></div>
	<script src="vue.min.js"></script>
	<script type="text/javascript" src="../dist/vue-stick.umd.js"></script>
	<script>
		// Vue.use(Stick)
		// 需要编译器
		new Vue({
			el: '#app',
			data: {
				isLoading: false,
				isEnd: false,
				list: [
					{
						"title": "合肥城中村 - 全景摄影计划",
						"cover": "http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg",
						"intro": "小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"
					},
					{
						"title": "为什么小剧客栈没有友情链接",
						"cover": "",
						"intro": "熟悉小剧的同学应该都知道，小剧客栈上面没有友情链接这样一个东西。很多朋友问过小剧这个问题，我也给过很多版本的原因，今天就来详细说一下为什么小剧客栈没有友情链接。"
					},
					{
						"cover": "http://static.bh-lay.com/blog/2018-summary/share.jpg",
						"intro": "2018 年对于我来说是非常特殊的一年，一整年工作强度非常大，但依旧会抽出时间去寻找自己的诗和远方。这一年在业余生活上做了很多从未有过的尝试，也因为一些兴趣爱好结交到一帮有趣的小伙伴。",
						"title": "剧中人的2018年终总结"
					},
					{
						"cover": "http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png",
						"intro": "今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。",
						"title": "可视化布局模块开发分享"
					},
					{
						"cover": "http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg",
						"intro": "大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。",
						"title": "讯飞19周年庆拍摄小记"
					},
					{
						"cover": "http://static.bh-lay.com/blog/2018-720yun/take-the-prize.jpg",
						"intro": "上周五，小剧脑袋一热请假去了趟北京，千里迢迢去参加了720云主办的产品发布会。按说这类发布会在家看直播更有意思，为什么小剧要劳民伤财的跑到现场去呢？",
						"title": "720云产品发布会小记"
					},
					{
						"author": "",
						"cover": "http://static.bh-lay.com/blog/2018-album/yangpuwujiaochang.jpg",
						"intro": "最近闲着无聊，整理了自己觉得还算看得过去的照片，特意挑出五张印刷了二十套。假模假式的拆掉四套照片，模仿着大神的方式做了下签名。", "title": "记一次「随意」的照片赠送"
					},
					{
						"cover": "http://static.bh-lay.com/blog/webpack-async-module/cover.jpg",
						"intro": "虽然项目代码经过打包压缩并且有拆分，但是页面在初始化时，这些资源都会一股脑地被加载到页面中。随着项目越来越大，滚雪球效应导致首屏加载时长的问题会越来越明显。因此适当的剥离部分模块，在需要使用的时候按需加载显得格外重要。",
						"title": "Webpack 异步模块实现"
					},
					{
						"cover": "http://static.bh-lay.com/blog/see-hefei/cover-2.jpg",
						"intro": "再次见到合肥，在历经五年的沪漂之后，以一种渴望被接纳的姿态来到合肥。这篇文章作为【上海 · 再见】的下篇，原计划在2017年9月前后完成。很遗憾一直拖到了四个月后的2018年。既然已经拖了这么久，索性就当作2017年全年回顾好了。以八月为分界线，聊聊小剧这一年的经历。",
						"title": "再见 · 合肥"
					},
					{
						"author": "",
						"cover": "http://static.bh-lay.com/blog/odeon-shoot/odeon-1.jpg",
						"intro": "这次拍摄也只是小剧的处女作，并没有多少经验作指导，仅仅是根据自己的思路临场做的尝试。好在团队的小伙伴比较耐心，不厌其烦地微调位置，经过反复拍摄，最终完成了此次拍摄。",
						"title": "记一次团队主题航拍"
					}
				]
			},
			components: {
				Stick: Stick.component
			},
			template: '<div class="container">' +
				'<Stick ' +
						':list="list"' +
						'@onScrollEnd="loadMore"' +
					'>' +
					'<template slot-scope="scope">' +
						'<div class="card">' +
							'<img :src="scope.data.cover" v-if="scope.data.cover" />' +
							'<h2>{{scope.data.title}}</h2>' +
							'<p>{{scope.data.intro}}</p>' +
							// '<button @click="deleteItem(scope.data)">删除</button>' +
						'</div>' +
					'</template>' +
				'</Stick>' +
				'<div class="tools" >' +
					'<div v-show="isLoading" >正在加载...</div>' +
					'<div v-if="isEnd" >没有更多数据了</div><br/>' +
					'<button v-if="!isEnd" @click="loadMore">加载更多</button>' +
				'</div>' +
			'</div>',
			methods: {
				deleteItem: function (data) {
					var index = this.list.indexOf(data)
					this.list.splice(index, 1)
				},
				loadMore: function () {
					if (this.list.length > 60) {
						this.isEnd = true
						return
					}
					var me = this
					this.isLoading = true
					setTimeout(function () {
						me.isLoading = false
						me.list.push(
							{
								"title": "合肥城中村 - 全景摄影计划",
								"cover": "http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg",
								"intro": "小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"
							},
							{
								"title": "为什么小剧客栈没有友情链接",
								"cover": "",
								"intro": "熟悉小剧的同学应该都知道，小剧客栈上面没有友情链接这样一个东西。很多朋友问过小剧这个问题，我也给过很多版本的原因，今天就来详细说一下为什么小剧客栈没有友情链接。"
							},
							{
								"cover": "http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png",
								"intro": "今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。",
								"title": "可视化布局模块开发分享"
							},
							{
								"cover": "http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg",
								"intro": "大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。",
								"title": "讯飞19周年庆拍摄小记"
							}
						)
					}, 1000)
				}
			}
		})
	</script>
</body>

</html>